<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" v-auth="'contract.add'" @click="add"></el-button>
                <el-button type="danger" plain icon="el-icon-delete" v-auth="'contract.delete'" :disabled="selection.length == 0" @click="batch_del"></el-button>
                <el-button type="warning" plain v-auth="'contract.check'" :disabled="selection.length == 0" @click="batch_check">审核</el-button>
                <el-button type="info" plain v-auth="'contract.uncheck'" :disabled="selection.length == 0" @click="batch_uncheck">反审核</el-button>
                <el-button type="primary" @click="plExport" v-auth="'contract.import'">导入</el-button>
                <el-button type="warning" :disabled="selection.length == 0" @click="exportExcel">导出</el-button>
                <!-- <div class="finish">
                    <div class="finishNum">销售总数量:
                        <div class="text">{{ total.total_number }}</div>
                    </div>
                    <div class="finishNum">勾选总数量:
                        <div class="text">{{ total.selection }}</div>
                    </div>
                </div> -->
            </div>
            <div class="right-panel">
                <div class="right-panel-search">
                    <el-date-picker v-model="search.date" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 230px" />
                    <el-input v-model="search.contract_code" placeholder="请输入销售单号" clearable @keyup.enter="upsearch"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                    <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" row-key="id" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query" @setExtend="setExtend" show-summary>
                <el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
                <el-table-column type="index" label="序号" fixed align="center" width="60"></el-table-column>
                <el-table-column label="销售单号" prop="contract_code" align="center"></el-table-column>
                <el-table-column label="销售日期" prop="open_single" align="center"></el-table-column>
                <el-table-column label="录单日期" prop="create_time" align="center"></el-table-column>
                <el-table-column label="销售人员" prop="seller.name" align="center"></el-table-column>
                <el-table-column label="销售数量" prop="total_number" align="center"></el-table-column>
                <el-table-column label="审核状态" align="center">
					<template #default="scope">
						<el-tag :type="scope.row.status == 0 ? 'warning' : 'success'">{{scope.row.status == 0 ? '待审核' : '已审核'}}</el-tag>
					</template>
				</el-table-column>
                <el-table-column label="操作" align="center" width="200">
                    <template #default="scope">
                        <el-button-group>
                            <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)" v-auth="'contract.show'">查看</el-button>
                            <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)" v-auth="'contract.edit'" v-if="scope.row.status == 0">编辑</el-button>
                            <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button text type="danger" size="small" v-auth="'contract.delete'" v-if="scope.row.status == 0">删除</el-button>
                                </template>
                            </el-popconfirm>
                            <el-button text type="primary" size="small" @click="table_mater(scope.row, scope.$index)">查看报料单</el-button>
                            <!-- <el-button text type="success" size="small" @click="table_edit(scope.row, scope.$index)">生成任务单</el-button> -->
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></save-dialog>
    <mater-list v-if="dialog.mater" ref="materDialog" @success="handleSuccess" @closed="dialog.mater = false"></mater-list>
    <check-status v-if="dialog.check" ref="checkDialog" @success="handleSuccess" @closed="dialog.check = false"></check-status>
    <expoet-all v-if="dialog.expoet" ref="expoetDialog" @success="handleSuccess" @closed="dialog.expoet = false"></expoet-all>
</template>

<script>
import MaterList from './materList.vue'
import saveDialog from './save'
import CheckStatus from './checkStatus.vue'
import ExpoetAll from '@/views/goods/expoetAll.vue'
import config from '@/config'

export default {
	name: '销售订单列表',
	components: {
		saveDialog,MaterList,CheckStatus,ExpoetAll,
	},
	data() {
        return {
			dialog: {
				save: false,
				mater: false,
				check: false,
				expoet: false,
			},
			apiObj: this.$API.contract.contract.list,
			selection: [],
			search: {
				contract_code: null,
                date:null,
			},
            query: {
                not_complete:1
            },
            total: {
                total_number: 0,
                selection: 0,
            },
            base: config.API_URL
		}
	},
	mounted() {
	},
	methods: {
        setExtend(data){
            this.total.total_number = data.total_number
        },
		//添加
		add() {
            this.$router.push({
				path: '/sale/contract/detail'
			});
		},
		//编辑
		table_edit(row) {
            let form = row
			form.zhuangtai = 'edit'
			this.$router.push({
				path: '/sale/contract/detail',
				query: form
			});
		},
		//查看
		table_show(row) {
            let form = row
			form.zhuangtai = 'show'
			this.$router.push({
				path: '/sale/contract/detail',
				query: form
			});
		},
        table_mater(row) {
			this.dialog.mater = true
			this.$nextTick(() => {
				this.$refs.materDialog.open('add').setData(row)
			})
		},
		//删除
		async table_del(row, index) {
			var reqData = { id: row.id }
			var res = await this.$API.contract.contract.delete.post(reqData);
			if (res.code == 1) {
				this.$refs.table.tableData.splice(index, 1);
                this.$refs.table.refresh()
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		async table_del_all(delete_ids) {
			var reqData = { id: delete_ids }
			var res = await this.$API.contract.contract.delete.post(reqData);
			if (res.code == 1) {
				this.$refs.table.refresh()
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		//批量删除
		async batch_del() {
			var delete_ids = [];
			this.selection.forEach((item) => {
				delete_ids.push(item.id)
			})
			this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
				type: 'warning'
			}).then(() => {
				this.table_del_all(delete_ids)
			}).catch(() => {

			})
		},
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
            // let selectionNum = 0
            // selection.forEach(item => {
            //     selectionNum = selectionNum + item.total_number
            // });
            // this.total.selection = selectionNum
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
        refresh(){
            for (const key in this.search) {
                this.search[key] = null;
            }
            this.$refs.table.upData(this.search)
        },
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'contract') {
				this.$refs.table.refresh()
			}
		},
        async batch_check() {
			var ids = [];
			let go = true
			this.selection.forEach((item) => {
				if (item.status != 0) {
					go = false
				} else {
					ids.push(item.id)
				}
			})
			if (!go) {
				this.$message.error("请选择未审核的订单")
				return
			}
            this.$confirm(`确定审核选中的 ${this.selection.length} 项吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				var res = await this.$API.contract.contract.check.post({id: ids,status: 1});
                this.isSaveing = false;
                if (res.code == 1) {
                    this.$refs.table.refresh()
                    this.$message.success("操作成功")
                } else {
                    this.$alert(res.message, "提示", {type: 'error'})
                }
            }).catch(() => {})
		},
		async batch_uncheck() {
            var ids = [];
			let go = true
			this.selection.forEach((item) => {
				if (item.status != 1) {
					go = false
				} else {
					ids.push(item.id)
				}
			})
			if (!go) {
				this.$message.error("请选择已审核的订单")
				return
			}
			this.$confirm(`确定反审核选中的 ${this.selection.length} 项吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				var reqData = {id: ids}
				var res = await this.$API.contract.contract.uncheck.post(reqData);
				if (res.code == 1) {
					this.$refs.table.refresh()
					this.$message.success("操作成功")
				} else {
					this.$alert(res.message, "提示", {type: 'error'})
				}
			}).catch(() => {})
		},
        // 导出
        async exportExcel(){
            var ids = this.selection.map(v => v.id)
            let query = {
                export:2,
                id: ids
            }
            var res = await this.$API.contract.contract.listExport.get(query);
            if (res.code == 2) {
                const fileUrl = res.data.url;
                const link = document.createElement("a");
                link.href = fileUrl;
                link.download = fileUrl;
                link.click();
            } else {
                this.$alert(res.message, "提示", { type: "error" });
            }
        },
        // 导入
        plExport(){
            this.dialog.expoet = true
            this.$nextTick(() => {
                this.$refs.expoetDialog.open('contract').setData(`${this.base}/otherOrder.xlsx`)
            })
        },
	}
}
</script>

<style></style>
